<template>
  <!-- 登录注册页面 -->

  <body>
    <div class="app">
      <div class="head">
        <p>登录</p>
      </div>
      <div class="back">
        <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left"
            style="background: transparent;border: none; color: black;padding-left: 6px;" @click="goBack()">返回主界面</el-button>
        </el-button-group>
      </div>
      <div class="login">
        <h3><span style="color: #d54d4d;">用户登录</span> <span @click="onregister" style="margin-left: 15px;">点我注册</span>
          <!-- <el-button type="primary"  >点我注册</el-button> -->
        </h3>
        <el-form :model="loginForm" ref="form" label-width="0px" :rules="rules">

          <el-form-item prop="username">
            <el-input type="text" v-model="loginForm.username" placeholder="账号">
              <template slot="prefix">
                <i class="el-icon-user custom-prefix"></i>
              </template>
            </el-input>
          </el-form-item>


<el-form-item prop="password">
  <el-input type="password" v-model="loginForm.password" placeholder="密码" show-password>
    <template slot="prefix">
      <i class="el-icon-lock custom-prefix" :class="showPassword ? 'el-icon-view' : 'el-icon-view-off'" @click="togglePassword"></i>
    </template>
  </el-input>
</el-form-item>




          <el-form-item style="padding-top: 20px;">
            <el-button type="primary" style="background: #d54d4d; border: none;width: 100%;" @click="login">登录</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" style="background: #aa6868; border: none;width: 100%" @click="reset">重置</el-button>
          </el-form-item>

        </el-form>
      </div>
    </div>
  </body>
</template>
      
<script>
export default {
  //登录界面
  name: "login",
  // 注册组件
  components: {
    // Login, Register
  },

  data() {
    return {
      loginForm: {
        username: 'admin',
        password: '123456',
      },
      showPassword: false,


      rules: {
        username: [
                    { required: true, message: '账号不能为空', trigger: 'blur' },
                    { min: 3, max: 11, message: '账号必须以字母开头,长度在3至11之间', trigger: 'blur' },
                    { validator: this.validateUsername, trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    { min: 3, max: 11, message: '密码只能包含字母和数字,长度在3至11之间', trigger: 'blur' },
                    { validator: this.validatePassword2, trigger: 'blur' }
                ],
    },
    }
  },
  methods: {
    // 返回
    goBack() {
      // window.history.back();
      this.$router.push("/user");
    
    },
//重置
    reset() {
      this.loginForm.username = "";
      this.loginForm.password = "";
    },
    //登录
    login() {

      //判断账号密码不为空
      if (this.loginForm.password === '' && this.loginForm.username === '') {
  this.$message.error('账号和密码不能为空');
  return;
} else if (this.loginForm.password === '') {
  this.$message.error('密码不能为空');
  return;
} else if (this.loginForm.username === '') {
  this.$message.error('账号不能为空');
  return;
}

//
      this.$http({
        method: "post",
        url: "http://106.52.94.26:3001/user/login",
        data: {
          username: this.loginForm.username, //用户名
          password: this.loginForm.password, //密码
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.$message({
          message: '登录成功',
          type: 'success',
          customClass: 'my-message'
        });
        //   // if (res.status == 200) {
        //   // 1. 存储 token
        window.sessionStorage.setItem("token", res.data.token);
        //   // // 1. 存储 user
        window.sessionStorage.setItem("user", JSON.stringify(res.data.user));


        //   // // 2. 跳转到主页
        this.$router.push("/user");
        // console.log(res.data.msg);
      }else {
      // 登录失败的处理逻辑
      // console.log(res.data.msg); // 输出错误信息
      // this.$message.error('登录失败：' + res.data.msg); // 将错误信息显示给用户
    }
  }).catch(error => {
    // console.error('登录请求失败：', error); // 输出请求失败的错误信息
    this.$message.error({message:'登录请求失败，请检查账号密码',customClass: 'my-message'}); // 提示网络请求失败
  }   
      );
    },

//跳注册
    onregister() {
      // // 2. 跳转到注册
      this.$router.push("/register");
    },
    //密码的隐藏
    togglePassword() {
    this.showPassword = !this.showPassword;
  },
   //确认密码校验
   validatePassword2(rule, value, callback) {
            // 只包含字母和数字的正则表达式
            const regex = /^[a-zA-Z0-9]+$/;
            if (value === '') {
                callback(new Error('确认密码不能为空'));
            } else if (value && !regex.test(value)) {
                callback(new Error('密码只能包含字母和数字,长度在3至11之间'));
            } else {
                callback();
            }
        },
        //账号的字母校验
        validateUsername(rule, value, callback) {
            // 以字母开头的正则表达式
            const regex = /^[a-zA-Z][a-zA-Z0-9]*$/;
            if (value && !regex.test(value)) {
                callback(new Error('账号必须以字母开头,长度在3至11之间'));
            } else {
                callback();
            }
        },
  }

}
</script>
      
<style scoped>
.custom-prefix {
  /* 在此处添加自定义样式 */
  padding-top: 13px;
  padding-left: 5px;
}

body {
  /* background-color: #fff; */
  height: 100vh;
}

/* 头部 */
.app .head {
  width: 100%;
  height: 50px;
  background-color: rgb(235, 24, 67);
  color: aliceblue;
  text-align: center;
}

/* 返回 */
.app .back {}

.app {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  flex-direction: column;
  /* 纵向排列 */
  /* background-color: #fff; */
}

/* 登陆盒子 */
.app .login {
  width: 80%;
  border: 1px;
  /* border: 1px solid red; */
  margin: 0 auto;
  margin-top: 20px;
  /* background-color: antiquewhite; */
  text-align: center;

}
</style>